<template>
  <div class="input05">
    <label>{{title}}</label>
    <el-input class="input05-input" placeholder="请输入内容" v-model="val" :disabled="disabled">
        <i slot="suffix" v-bind:class="[icon, 'el-input__icon']" v-on:click="iconClick" >
          <span v-show="!disabled">
            {{icontitle}}
            <!-- {{icontitle}} -->
          </span>
          
        </i>
    </el-input>
  </div>
</template>
<style scoped>
    .input05 {
        margin: 5px 5px;
    }
    
    .input05-input {
        display: inline-block;
        width: auto;
    }
    
    .input05 i {
        font-size: 18px;
        font-style: normal;
    }
    
    .input05>>>.el-input__inner {
        display: inline-block !important;
        background: #ffffff;
        min-width: 250px;
        text-align: center;
    }
    
    .input05>>>.el-input.is-disabled .el-input__inner {
        background: transparent !important;
        border: 0px;
        color: #333;
        cursor: text;
    }
    
    .input05>>>.el-input__icon {
        display: inline-block;
        line-height: 33px;
    }
    
    .input05>>>.el-input__icon span {
        cursor: pointer;
        color: red;
        font-size: 12px;
        margin-top: -3px;
        line-height: 40px;
        width: 35px;
        display: inline-block;
    }
    
    .input05>>>.el-input__suffix {
        right: auto;
    }
</style>
<script>
    export default {
        name: "input05",
        props: ['title', 'icon', 'value', 'disabled', 'icontitle'],
        meta: {
            descr: "可控制禁止的输入框"
        },
        data() {
            return {
                val: '',
            };
        },
        created() {
            this.val = this.value;
            this.dis = this.disabled;
        },
        methods: {
            change() {
                this.dis = this.disabled;
            },
            iconClick() {
                this.$emit('cancelClick');
            }
        },
        watch: {
            val(value) {
                this.$emit('input', value);
            },
            value() {
                this.val = this.value;
            },
        }
    };
</script>